<template>
	<view>
		<navtop :title="title"></navtop>
		<view v-if="!load" class="list">
			<view v-for="(item,index) in list" class="li" @click="get_play_url(item.id)">
				<view class="img"><image :src="item.pic" mode="aspectFill"></image></view>
				<view class="name truncate mt-2">{{item.name}}</view>
				<view class="truncate text-sub text-gray-400 text-center mb-2" style="width:100%;">{{computedNav(item.cid)}} {{item.state}}</view>
			</view>
			<loading :type="1" :load="pageload" :nums="list.length"></loading>
			<view class="safearea-bottom"></view>
			<view class="safearea-bottom-fixed"></view>
		</view>
		<loading :load="true" v-else></loading>
	</view>
</template>

<script>
    let that = null,timer = null;
    export default {
		computed:{
			// 返回分类类型
			computedNav(){
				return (cid)=>{
					let navList = uni.getStorageSync('nav-list');
					let obj = navList.find(item=>item.id == cid)
					return obj.name
				}
			}
			
		},
        data() {
            return {
				load: true,
				page: 1,
				pageload: true,
                list: [],
				type: 'hot',
				title: '热门排行',
            }
        },
        onLoad(e) {
            that = this;
			if(e.type) that.type = e.type;
			that.get_title();
			that.get_data();
        },
		onPullDownRefresh() {
			that.page = 1;
			that.get_data();
		},
		onReachBottom() {
		    //阻止重复加载
		    if(timer !== null) clearTimeout(timer);
			if(that.pageload){
				timer = setTimeout(function(){
					that.page++;
					that.get_data();
				},500);
			}
		},
        methods: {
			get_play_url(id){
				let url = 'play?id='+id;
				// #ifdef APP-PLUS
					url = 'aplay?id='+id;
				// #endif
				that.get_link(url);
			},
			get_link(url){
				uni.navigateTo({
					url: '../pages/'+url
				});
			},
			//设置标题
			get_title: function(){
				if(that.type == 'news'){
					that.title = '最近更新';
				}else if(that.type == 'free'){
					that.title = '限时免费';
				}else if(that.type == 'reco'){
					that.title = '热门推荐';
				}
				uni.setNavigationBarTitle({
				    title: that.title
				});
			},
			get_data(){
				that.http.get_curl('index/data',{page:that.page,type:that.type},function(res){
					uni.stopPullDownRefresh(); //停止下拉样式
					that.load = false;
					if(res.code == 1){
						if(that.page == 1){
							that.list = res.data.list;
						}else{
							that.list = that.list.concat(res.data.list);
						}
						that.pageload = res.data.pageload;
					}
				});
			}
        }
    }
</script>

<style lang="scss" scoped>
	.text-sub{
		font-size: 24rpx;
	}
    .list{width: calc(100% - 64rpx);margin: 0 auto;
        .li{width: calc(50% - 16rpx);margin-right: 30rpx;background: #fff;box-shadow: 0px 4rpx 32rpx 0px rgba(0,0,0,.04);border-radius: 16rpx;overflow: hidden;display: inline-block;vertical-align: top;margin-top: 32rpx;
            .img{width: 100%;height: 400rpx;background: #f8f8f8;
                image{width: 100%;height: 100%;object-fit: cover;}
            }
            .name{width: calc(100% - 20rpx);padding: 0 10rpx;font-size: 28rpx;color: #333;text-align: center;}
        }
        .li:nth-child(2n){margin-right: 0;}
    }
</style>